<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>长袜子皮皮图书屋</title>
<meta name="description"
	content="Sidebar Transitions: Transition effects for off-canvas views" />
<meta name="keywords"
	content="transition, off-canvas, navigation, effect, 3d, css3, smooth" />
<meta name="author" content="Codrops" />

<!-- CSS -->
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/normalize.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/demo.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/icons.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/component.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/bootstrap-select/css/bootstrap-select.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/bootstrap-fileinput/css/fileinput.min.css">
	
<style type="text/css">
.form_fonts {
	font-size: 24px
}

.form_table {
	border-collapse: separate;
	border-spacing: 30px;
	margin: 0 auto
}

.form_btn {
	color: #fff;
	background-color: #33A463;
	border-color: #48a770;
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
</style>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/default.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/component-modal.css" />
<script src="${pageContext.request.contextPath}/js/modernizr.custom.js"></script>
</head>
<body style="padding: 0px">


	<!-- ---------- 图书信息展示模态框 start---------- -->
	<div class="md-modal md-effect-15 md-close" aria-hidden="true"
		style="z-index: 99999" id="modal-15">
		<div class="md-content">
			<h3>图书信息</h3>
			
			<div>
				<div class="input-group input-group-sm">
					<span class="input-group-addon" id="isbnLabel">ISBN&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<input type="text" class="form-control" placeholder="ISBN"
						id="book_isbn" aria-describedby="sizing-addon3">
				</div>
				<div class="input-group input-group-sm">
					<span class="input-group-addon" id="bookNameLabel">书&nbsp;&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<input type="text" class="form-control" placeholder="名字"
						id="book_name" aria-describedby="sizing-addon3">
				</div>
				<div class="input-group input-group-sm">
					<span class="input-group-addon" id="priceLabel">价&nbsp;&nbsp;&nbsp;格&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<input type="text" class="form-control" placeholder="价格"
						id="book_price" aria-describedby="sizing-addon3">
				</div>
				<div class="input-group input-group-sm">
					<span class="input-group-addon" id="authorLabel">作&nbsp;&nbsp;&nbsp;者&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<div aria-describedby="sizing-addon3"><select id="book_authors" multiple data-live-search="true"> </select></div>
				</div>
				
				<div class="input-group input-group-sm">
					<span class="input-group-addon" id="presLabel">出版社&nbsp;&nbsp;&nbsp;</span>
					<div aria-describedby="sizing-addon3"><select id="book_presses" multiple data-live-search="true"> </select></div>
				</div>
				<br />
				<div class="input-group input-group-sm user-book-item">
					<span class="input-group-addon" id="buyTimeLabel">购买时间</span> <input
						type="text" class="form-control" placeholder="购买时间" id="buy_time"
						aria-describedby="sizing-addon3">
				</div>
				<div class="input-group input-group-sm user-book-item">
					<span class="input-group-addon" id="buySiteLabel">购买地点</span> <input
						type="text" class="form-control" placeholder="购买地点" id="buy_site"
						aria-describedby="sizing-addon3">
				</div>
				<div class="input-group input-group-sm user-book-item">
					<span class="input-group-addon" id="buyTypeLabel">购买方式</span> 
					<div aria-describedby="sizing-addon3"><select id="buy_type" data-live-search="true"> </select></div>
				</div>
				<div class="input-group input-group-sm user-book-item">
					<span class="input-group-addon" id="hasFinishLabel">是否读完</span> 
					<div aria-describedby="sizing-addon3">
						<select id="has_finish" data-live-search="true"> 
							<option value="是">是</option>
	    					<option value="否">否</option>
						</select>
					</div>
				</div>
				<br /> <br />
				<div style="text-align: center" id="btn-group-1">
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-default" id="saveMyBook"
							style="margin-right: 10px">保存</button>
						<button type="button" class="btn md-close">取消</button>
					</div>
				</div>
				<div style="text-align: center" id="btn-group-2">
					<div class="btn-group" role="group">
						<button type="button" class="btn md-close">确定</button>
					</div>
				</div>
				
				
			</div>
		</div>
	</div>
	
	
	
	<div class="md-modal md-effect-14 md-close" aria-hidden="true"
		style="z-index: 99999" id="modal-14">
		<div class="md-content">
			<h3>作者信息</h3>
			
			<div>
				<div class="input-group input-group-sm">
					<span class="input-group-addon" id="nameLabel">姓&nbsp;&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<input type="text" class="form-control" placeholder="姓名"
						id="author_name" aria-describedby="sizing-addon3">
				</div>
				<div class="input-group input-group-sm">
					<span class="input-group-addon" id="nationalLabel">国&nbsp;&nbsp;&nbsp;籍&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<div aria-describedby="sizing-addon3"><select id="author_national" multiple data-live-search="true"> </select></div>
				</div>
				
				<br /> <br />
				<div style="text-align: center" id="btn-group-3">
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-default" id="saveMyBook"
							style="margin-right: 10px">保存</button>
						<button type="button" class="btn md-close">取消</button>
					</div>
				</div>
				<div style="text-align: center" id="btn-group-4">
					<div class="btn-group" role="group">
						<button type="button" class="btn md-close">确定</button>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	<!-- ---------- 图书信息展示模态框 end---------- -->
	</div>


	<div class="md-overlay"></div>


	<div id="st-container" class="st-container">
		<div class="st-pusher">

			<!-- ---------- 侧滑菜单 start ---------- -->
			<nav class="st-menu st-effect-7" id="menu-7">
			<h2>Hello Jason</h2>
			<ul>
				<li><a class="icon icon-lab menu-item" id="test"
					href="${pageContext.request.contextPath}/user/books">我的图书</a></li>
				<li><a class="icon icon-search menu-item" href="#">图书查询</a></li>
				<li><a class="icon icon-search menu-display" href="#">个人中心</a></li>
				<li><a class="icon icon-params menu-item" href="#">图书管理</a></li>
				<li><a class="icon icon-pen menu-item" 
					href="${pageContext.request.contextPath}/sys/authors">作者管理</a></li>
				<li><a class="icon icon-shop menu-item" href="#">出版社管理</a></li>
				<li><a class="icon icon-user menu-item" href="#">人员管理</a></li>
				<li><a class="icon icon-key menu-item" href="#">角色管理</a></li>
				<li><a class="icon icon-clip menu-item" href="#">菜单管理</a></li>
				<li><a class="icon icon-note menu-item" href="#">系统日志</a></li>
			</ul>
			</nav>
			<!-- ---------- 侧滑菜单 end ---------- -->


			<div class="st-content">
				<!-- 包装内容 -->
				<div class="st-content-inner">
					<!-- 顶部导航 -->
					<div class="codrops-top clearfix">
						<!-- st-trigger-effects:屏幕亮度变暗  st-effect-7:侧滑菜单展示动画 -->
						<a style="padding-top: 10px" href="#" id="st-trigger-effects"
							data-effect="st-effect-7"> <span>菜单</span>
						</a> <a style="padding-top: 10px"
							href="${pageContext.request.contextPath}/icon"> <span>首页</span>
						</a> <a style="padding-top: 10px"
							href="${pageContext.request.contextPath}/test"> <span>测试</span>
						</a>
						<!-- user标签，表示认证、记住我的用户 -->
						<span class="right">
							<p style="margin-right: 20px">
								欢迎您： <a href="logout"> <span>登出</span>
								</a>
							</p>
						</span>
						<!-- guest标签表示游客用户 -->
						<!-- 
							<shiro:guest>
								<span class="right">
									<a class="codrops-icon codrops-icon-drop" href="user/main">
										<span>登录</span>
									</a>
								</span>
							</shiro:guest>
							 -->
					</div>
					<header class="codrops-header" id="mainHeader">
					<h2 id="pageTitle">
						<span>Hello World</span>
					</h2>
					</header>
					<main class="" id="mainBody" style="text-align:center;"> <iframe
						scrolling="no" frameborder="0" id="main-box"
						style="width: 70%; min-height: 450px;"></iframe> </main>
				</div>
				<!-- /st-content-inner -->
			</div>
			<!-- /st-content -->
		</div>
		<!-- /st-pusher -->
	</div>
	<!-- /st-container -->




	<script type="text/javascript" charset="utf-8"
		src="${pageContext.request.contextPath}/common/js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="${pageContext.request.contextPath}/bootstrap-fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="${pageContext.request.contextPath}/js/classie.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="${pageContext.request.contextPath}/js/sidebarEffects.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="${pageContext.request.contextPath}/js/modernizr.custom.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="${pageContext.request.contextPath}/bootstrap-select/js/bootstrap-select.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="${pageContext.request.contextPath}/js/common.js"></script>
	<script type="text/javascript" charset="utf-8">
		$(function() {
			$("#file-0b").fileinput();
			$(".menu-item").click(function() {
				$("#pageTitle").html("<span>" + $(this).text() + "</span>");
				var url = $(this).attr("href");
				$('#main-box').attr('src', url);
				return false;
			});
			$("#saveMyBook").click(function() {
				saveMyBook();
			});
			
			initData();
		})

		function saveMyBook() {
			var author = $("#book_authors").val();
			var authors = "";
			if(null != author && author.length > 0) {
				for(var i=0;i<author.length;i++) {
					authors = authors + author[i] + ",";
				}
				authors = authors.substring(0, authors.length-1);
			}
			
			var press = $("#book_presses").val();
			var presses = "";
			if(null != press && press.length > 0) {
				for(var i=0;i<press.length;i++) {
					presses = presses + press[i] + ",";
				}
				presses = presses.substring(0, presses.length-1);
			}
			
			var params = {
				"book.name" : $("#book_name").val(),
				"book.isbn" : $("#book_isbn").val(),
				"book.price" : $("#book_price").val(),
				"book.authors" : authors,
				"book.presses" : presses,
				"type.id" : $("#buy_type").val(),
				"buySite" : $("#buy_site").val(),
				"buyTime" : $("#buy_time").val(),
				"readOff" : $("#has_finish").val()
			}
			var url = basePath + "/user/book/addBook";
			$.ajax({
				url : url,
				method : 'post',
				data : params,
				dataType : 'json',
				success : function(data) {
					alert(data.message);
				}
			});
		}
		
		
		
		/**
		 * 初始化数据
		 */
		function initData() {
			var authorsUrl = basePath + "/author/getall";
			var pressesUrl = basePath + "/press/getall";
			var typeUrl = basePath + "/buytype/getall";
			var nationalUrl = basePath + "/national/getall";
			$.ajax({
				url : authorsUrl,
				method : "post",
				data : {
					time :new Date(),
					page : 0,
					rows : 15
				},
				dataType : 'json',
				success : function(result) {
					packAuthorSelector(result.object);
				}
			});
			$.ajax({
				url : pressesUrl,
				method : "post",
				data : {
					time :new Date(),
					page : 0,
					rows : 15
				},
				dataType : 'json',
				success : function(result) {
					packPressSelector(result.object);
				}
			});
			$.ajax({
				url : typeUrl,
				method : "post",
				data : {
					time :new Date(),
					page : 0,
					rows : 15
				},
				dataType : 'json',
				success : function(result) {
					packBuyTypeSelector(result.object);
				}
			});
		}
		
		function packAuthorSelector(authors) {
			var selector1 = $("#book_authors");
		    for (var i = 0; i < authors.length; i++) {  
		    	selector1.append("<option value='" + authors[i].id + "'>" + authors[i].name + "</option>");  
		    }  
		    var selector2 = $("#")
		}

		function packPressSelector(presses) {
			var selector = $("#book_presses");
		    for (var i = 0; i < presses.length; i++) {  
		    	selector.append("<option value='" + presses[i].id + "'>" + presses[i].name + "</option>");  
		    }  
		}

		function packBuyTypeSelector(types) {
			var selector = $("#buy_type");
		    for (var i = 0; i < types.length; i++) {  
		    	selector.append("<option value='" + types[i].id + "'>" + types[i].name + "</option>");  
		    }  
		}
		
		function packNationalSelector(nationals) {
			var selector = $("#author_national");
			for (var i = 0; i < nationals.length; i++) {  
		    	selector.append("<option value='" + nationals[i].id + "'>" + nationals[i].name + "</option>");  
		    }  
		}
	</script>
</body>
</html>
